<template>
  <div class="activity-container">
    <div class="header">
      <div class="back-btn btn-sword" @click="goBack">返回</div>
      <div class="title brush-title">成就系统</div>
      <div class="placeholder"></div>
    </div>

    <div class="panel-container">
      <div class="panel-header">
        <div class="panel-title">成就进度</div>
        <div class="panel-subtitle">已完成 {{ achievementData.completed }}/{{ achievementData.total }}</div>
      </div>

      <div class="achievement-category-tabs">
        <div 
          v-for="cat in achievementCategories" 
          :key="cat.id" 
          class="achievement-tab"
          :class="{ active: cat.id === currentAchievementCategory }"
          @click="currentAchievementCategory = cat.id"
        >
          <span>{{ cat.name }}</span>
        </div>
      </div>

      <div class="achievement-list">
        <div 
          v-for="ach in filteredAchievements" 
          :key="ach.id" 
          class="achievement-item"
          :class="{ completed: ach.status === 2, actionable: ach.status === 1 }"
        >
          <div class="achievement-left">
            <div class="achievement-name">{{ ach.name }}</div>
            <div class="achievement-desc">{{ ach.description }}</div>
            <div class="progress-bar">
              <div 
                class="progress-inner"
                :style="{ width: `${Math.min(100, Math.round(ach.current / ach.target * 100))}%` }"
              ></div>
            </div>
            <div class="progress-text">{{ ach.current }}/{{ ach.target }}</div>
          </div>
          <div class="achievement-right">
            <div class="reward">奖励：{{ ach.rewardIcon }} {{ ach.rewardValue }}</div>
            <div 
              class="claim-btn"
              :class="{ disabled: ach.status !== 1 }"
              @click="claimAchievement(ach)"
            >{{ ach.status === 2 ? '已领取' : (ach.status === 1 ? '领取' : '未达成') }}</div>
          </div>
        </div>
      </div>

      <div class="bottom-tip">更多成就陆续上线，敬请期待</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      achievementData: {
        completed: 5,
        total: 30,
        achievements: [
          { id: 1, category: 'combat', name: '初出茅庐', description: '完成10次战斗', current: 10, target: 10, status: 2, rewardIcon: '💎', rewardValue: '灵石×200' },
          { id: 2, category: 'combat', name: '小有成就', description: '完成50次战斗', current: 32, target: 50, status: 0, rewardIcon: '💎', rewardValue: '灵石×500' },
          { id: 3, category: 'cultivation', name: '修炼入门', description: '修炼等级达到10级', current: 15, target: 10, status: 2, rewardIcon: '🔮', rewardValue: '功德×20' },
          { id: 4, category: 'cultivation', name: '修炼小成', description: '修炼等级达到30级', current: 15, target: 30, status: 0, rewardIcon: '🔮', rewardValue: '功德×50' },
          { id: 5, category: 'collection', name: '初级收藏家', description: '收集10种法宝', current: 8, target: 10, status: 0, rewardIcon: '🗡️', rewardValue: '随机法宝×1' },
          { id: 6, category: 'collection', name: '中级收藏家', description: '收集30种法宝', current: 8, target: 30, status: 0, rewardIcon: '🗡️', rewardValue: '随机法宝×3' },
          { id: 7, category: 'social', name: '初级社交', description: '添加5个好友', current: 5, target: 5, status: 2, rewardIcon: '💎', rewardValue: '灵石×100' },
          { id: 8, category: 'social', name: '中级社交', description: '添加20个好友', current: 5, target: 20, status: 0, rewardIcon: '💎', rewardValue: '灵石×300' }
        ]
      },
      achievementCategories: [
        { id: 'combat', name: '战斗' },
        { id: 'cultivation', name: '修炼' },
        { id: 'collection', name: '收集' },
        { id: 'social', name: '社交' }
      ],
      currentAchievementCategory: 'combat'
    }
  },
  computed: {
    filteredAchievements() {
      return this.achievementData.achievements.filter(a => a.category === this.currentAchievementCategory)
    }
  },
  methods: {
    goBack() { uni.navigateBack() },
    claimAchievement(ach) {
      if (ach.status !== 1) {
        uni.showToast({ title: ach.status === 2 ? '已经领取过了' : '未达到领取条件', icon: 'none' })
        return
      }
      setTimeout(() => {
        ach.status = 2
        uni.showToast({ title: '领取成功', icon: 'success' })
      }, 300)
    }
  }
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
.activity-container {
  min-height: 100vh;
  background-color: #f8f6f1;
  background-image: radial-gradient(circle at 20% 15%, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.0) 60%),
                    radial-gradient(circle at 80% 85%, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.0) 60%);
  padding-bottom: 30rpx;
}
.header { display:flex; justify-content:space-between; align-items:center; padding:30rpx 40rpx; color:#4b3a2a; border-bottom:1rpx solid #d8c7a3; }
.placeholder{ width:80rpx; }
.brush-title { font-family:'Ma Shan Zheng','Kaiti SC','STKaiti',serif; font-size:40rpx; color:#2e1a0f; letter-spacing:2rpx; }
.btn-sword { position:relative; display:inline-flex; align-items:center; justify-content:center; padding:10rpx 32rpx 10rpx 28rpx; background:#6b4f3b; color:#fff; border-radius:8rpx; border:1rpx solid #4b3a2a; overflow:visible; }
.btn-sword::before{ content:""; position:absolute; right:-14rpx; top:50%; transform:translateY(-50%); width:0; height:0; border-top:10rpx solid transparent; border-bottom:10rpx solid transparent; border-left:14rpx solid #6b4f3b; }
.btn-sword::after{ content:""; position:absolute; left:-10rpx; top:50%; transform:translateY(-50%); width:6rpx; height:26rpx; background:#4b3a2a; border-radius:2rpx; }
.panel-container { margin:30rpx; padding:34rpx; border-radius:16rpx; background:#fff; border:1rpx solid #e2d6bd; box-shadow:0 6rpx 20rpx rgba(75,58,42,0.08); }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 24rpx; }
.achievement-category-tabs { display:flex; gap: 24rpx; margin-bottom: 24rpx; }
.achievement-list { display:flex; flex-direction:column; gap: 20rpx; }
.achievement-item { display:flex; justify-content:space-between; padding: 24rpx; border: 1rpx solid #e2d6bd; border-radius: 12rpx; background:#fff; box-shadow:0 4rpx 12rpx rgba(75,58,42,0.06); }
.achievement-item.completed { opacity: 0.85; }
.achievement-left { flex: 1; }
.achievement-right { display:flex; flex-direction:column; align-items:flex-end; gap: 10rpx; width: 220rpx; }
.progress-bar { height: 16rpx; background:#e6e0d6; border-radius: 8rpx; overflow:hidden; margin-top: 8rpx; }
.progress-inner { height: 16rpx; background: linear-gradient(90deg, #8c6b52 0%, #6b4f3b 100%); }
.claim-btn { padding: 10rpx 20rpx; background:#6b4f3b; color:#fff; border-radius: 8rpx; border:1rpx solid #4b3a2a; }
.claim-btn.disabled { background:#909399; }
.bottom-tip{ margin-top: 20rpx; color:#7a6a5c; font-size: 24rpx; text-align:center; }
</style>